<template>
	<!-- <u-navbar titleStyle="font-size:20px;font-weight:600" :autoBack="true" style="max-width: 700px;" :placeholder='true'
		:title="'注册'" /> -->
	<view class=""
		style="height: 260px;padding:98px 18px 0 22px;background: linear-gradient(315deg, #23B2FF 0%, #409EFF 100%);">
		<view class="flex-jc-s-b" style="height: 159px;align-items: flex-start;">
			<view class="logo-text" style="">
				<view class="">你好，</view>
				<view class="" style="margin-top: 5px;">{{'欢迎注册' + getProjectName()}}</view>
			</view>
			<image style="height:89px;width:132px;transform: translateX(12px);"
				:src="projectCode === 'JPQ'? logoUrl : otherLogoUrl" mode="">
			</image>
		</view>
	</view>
	<view class="form-cart">
		<u--form labelWidth="0" labelPosition="left" :model="data['form']" :rules="{}" ref="formRegister">
			<view class="form-item-bg">
				<u-form-item label="" prop="name">
					<u--input maxlength='8' v-model="data['form'].name" placeholder='请输入姓名' border="none"></u--input>
				</u-form-item>
			</view>
			<view class="form-item-bg">
				<u-form-item label="" prop="mobile">
					<view class="flex-jc-s-b">
						<u--input maxlength='11' v-model="data['form'].mobile" placeholder='请输入手机号' border="none"
							@change="checkMobile('input')"></u--input>
						<view class="code-text" @click="codeHandle" :style="data.codeInfo!='获取验证码'?'':{color:'#409EFF'}">
							{{data.codeInfo}}</view>
					</view>
				</u-form-item>
			</view>
			<view class="form-item-bg">
				<u-form-item label="" prop="captcha">
					<u--input maxlength='6' v-model="data['form'].captcha" placeholder='请输入验证码' border="none"></u--input>
				</u-form-item>
			</view>
			<!-- <view class="form-item-bg" v-if="data.code === 'student'">
				<u-form-item label="" prop="idCard">
					<u--input maxlength='18' v-model="data['form'].idCard" placeholder='请输入身份证号' border="none"></u--input>
				</u-form-item>
			</view> -->
			<view class="form-item-bg" v-if="data.code !== 'student'">
				<u-form-item label="" prop="password">
					<u--input type="password" maxlength='20' v-model="data['form'].password" placeholder='请输入密码'
						border="none"></u--input>
				</u-form-item>
			</view>
			<view class="flex-jc-s-b selectView" style="width: 100%;padding-left: 17px;" @click="selectSubject"
				v-if="data.code === 'student'">
				<text v-if="data.courseName === ''" style="color:#c0c4cc;font-size: 15px">请选择科目</text>
				<text v-if="data.courseName !== ''" class="color-black-gray">{{data.courseName}}</text>
				<u-icon name="arrow-down" color="#c0c4cc"></u-icon>
			</view>
			<view v-if="data.code === 'student'" style="font-size: 12px;color: #D3D3D3;margin-top:5px;">注册成功后初始密码为手机号后六位
			</view>
			<view v-else style="font-size: 12px;color: #D3D3D3;margin-top:-15px;">密码由8-20位数字与英文字母组成</view>
		</u--form>
		<u-button type="primary" shape='circle' style="max-width: 600px;"
			:customStyle="{width: '96%',background:'#409EFF',height:'44px','font-size':'17px',border:'none','margin-top':'25px'}"
			@click='registerHandle'>立即注册</u-button>
		<view class="seller-button" @click="goLogin">已有账号登录</view>
	</view>
	<u-picker :show="showSubjectPicker" ref="subjectPicker" :columns="data.subjectList" title="请选择科目" keyName="name"
		@confirm='confirmChange' @cancel="closePicker" @close="closePicker" :closeOnClickOverlay="true"></u-picker>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		coursRegister,
		coursCaptcha,
		listFreeCourse,
		studentRegister
	} from '@/api/login.js'
	import {
		isMobile
	} from '@/utils/validate.js'
	import logoUrl from "@/static/image/logo.png";
	import otherLogoUrl from "@/static/image/logo-zjxt.png";
	const {
		proxy
	} = getCurrentInstance()
	const data = reactive({
		code: '',
		courseName: '',
		selectCourse: null,
		subjectList: [
			[]
		],
		title: '',
		form: {
			"name": "", //姓名
			"mobile": "", //手机号 商家
			"phone": "", //手机号 学员
			"captcha": "", //验证码
			"parentNum": "", //上级邀请码
			"password": "", //密码
			'idCard': '', //身份证号
			'courseId': '', //科目
		},
		rule: {
			name: [{
				required: true,
				message: '请输入姓名',
				trigger: ['blur', 'change']
			}],
			mobile: [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			}],
			captcha: [{
				required: true,
				message: '请输入验证码',
				trigger: ['blur', 'change']
			}],
			password: [{
				required: true,
				message: '请输入密码',
				trigger: ['blur', 'change']
			}],
		},
		codeInfo: '获取验证码'
	})
	const showSubjectPicker = ref(false)
	const formRegister = ref('')
	const projectCode = ref('')
  const chineseRegex = /^[\u4e00-\u9fa5]{2,4}$/;
	onLoad((options) => {
		data.code = options.type || ''
		console.log(options, 'options.scene')
		data['form'].parentNum = options.scene || ''
	})
	onMounted(() => {
		projectCode.value = proxy.getProjectCode()
		initFreeCourse()
	})
	const initFreeCourse = () => {
		data.courseName = ''
		data.form.courseId = null
		listFreeCourse().then((res) => {
			if (res.rows) {
				res.rows.map(item => {
					data.subjectList[0].push(item)
				})
			}
		})
	}
	const checkMobile = (type) => {
		if (type == 'input' && !(data['form'].mobile.length == 11)) {
			return
		}
		let result = false
		result = isMobile(data['form'].mobile)
		if (!data['form'].mobile || (!isMobile(data['form'].mobile))) {
			result = false;
			uni.$u.toast('手机号格式不正确');
		}
		return result
	}
	const registerHandle = () => {
		if (!data.form.name) {
			uni.$u.toast('请输入姓名');
			return
		} else {
      if(!chineseRegex.test(data.form.name)) {
        uni.$u.toast('姓名格式不正确，请填写真实姓名');
        return
      }
    }
		if (!data.form.mobile) {
			uni.$u.toast('请输入手机号');
			return
		}
		if (!data.form.captcha) {
			uni.$u.toast('请输入验证码');
			return
		}
		if (!data.form.password && data.code !== 'student') {
			uni.$u.toast('请输入密码');
			return
		}
/* 		if (!data.form.idCard && data.code === 'student') {
			uni.$u.toast('请输入身份证号');
			return
		} */
		if (!data.form.courseId && data.code === 'student') {
			uni.$u.toast('请选择注册科目');
			return
		}
		if (!checkMobile()) {
			return
		}
		if (data.code === 'student') {
			let requestStudentData = {
				name: data.form.name,
				captcha: data.form.captcha,
				phone: data.form.mobile,
				idCard: data.form.mobile,
				courseId: data.form.courseId
			}
			studentRegister(requestStudentData).then((res) => {
				uni.$u.toast('注册成功')
				setTimeout(() => {
					goLogin('query')
				}, 500)
			}).catch((err) => {
				uni.$u.error(err.msg)
			})
		} else {
			let requestSaleData = {
				name: data.form.name,
				captcha: data.form.captcha,
				mobile: data.form.mobile,
				password: data.form.password,
				parentNum: data.form.parentNum
			}
			coursRegister(requestSaleData).then((res) => {
				uni.$u.toast('注册成功')
				setTimeout(() => {
					goLogin('seller')
				}, 500)
			}).catch((err) => {
				uni.$u.error(err.msg)
			})
		}
	}
	const codeHandle = () => {
		if (!checkMobile()) {
			return
		}
		if (data.codeInfo == '获取验证码') {
			let typeCode = data.code === 'student' ? 'registerStudent' : 'register'
			coursCaptcha({
				mobile: data['form'].mobile,
				typeCode: typeCode
			}).then((res) => {
				uni.$u.toast('验证码已成功发送，请注意查看')
				let codeTime = 60
				let codeSetInterval = setInterval(() => {
					codeTime--
					data.codeInfo = codeTime + 's'
					if (codeTime == 0) {
						clearInterval(codeSetInterval);
						data.codeInfo = '获取验证码'
					}
				}, 1000)
			})
		}
	}
	const goLogin = () => {
    let type = data.code === 'student'? 'query' : 'seller'
		proxy.$routePage({
			url: 'pages/login/login',
			type: 'redirect',
			params: {
				pageType: type
			}
		})
	}

	const closePicker = (e) => {
		showSubjectPicker.value = false
	}
	const confirmChange = (val) => {
		data.form.courseId = val.value[0].id || ''
		data.courseName = val.value[0].name
		showSubjectPicker.value = false
	}

	function selectSubject() {
		showSubjectPicker.value = true;
	}
</script>
<style lang="scss">
	.form-item-bg {
		background-color: #FFFFFF;
		padding: 5px 15px 15px 15px;
		height: 50px;
		margin-bottom: 20px;
	}

	.form-cart {
		padding: 40px 15px 0 15px;
		background: #F7F7F7;
		transform: translateY(-60px);
		border-radius: 20px 20px 0px 0px;
	}

	.logo-text {
		font-size: 20px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.code-text {
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		padding-left: 15px;
		line-height: 24px;
		text-align: center;
		border-left: 1px solid rgba(0, 0, 0, 0.1);
		color: #D3D3D3;
	}

	.seller-button {
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		width: 85px;
		margin: 25px auto 0 auto;
		color: #999999;
		border-bottom: 1px solid;
	}

	.selectView {
		background: #fff;
		border: none;
		width: 92%;
		padding: 14px 15px;
		border-radius: 4px;
		margin-top: 1.25rem;
		// border: 0.5px solid #dadbde;
	}
</style>
